<!DOCTYPE html>
<html>

<head>
    <title>Index</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>

<body>
    <div id="header-bar">
        <ul class="header-bar-left">
            <li> <a href="#">HOME </a> </li>
            <li><a href="#">NEWS</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">CONTACTS</a></li>
            </li>
        </ul>
        <ul class="header-bar-right header-breadcrumb">
            <li><a href="/user/loginpage" target="_top">Sigin in</a></li>
            <li><a href="/user/joinpage" target="_top">Sigin up</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->

    </div>
    <section id="menu-area">
        <img class="img-responsive" id="index-header-img">
        <div id="navigation" role="navigation">
            <nav class="navbar navbar-default col-md-12">
                <a class="navbar-brand" href="#">Flowers</a>
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#menu-navbar" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>

                    <div class="collapse navbar-collapse" id="menu-navbar">
                        <ul class="nav navbar-nav">
                            <li class="active"> <a href="#">HOME </a> </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                    aria-haspopup="true" aria-expanded="false">MENU<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Flower 1</a></li>
                                    <li><a href="#">Flower 2</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">Flower 3</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">Flower 4</a></li>
                                </ul>
                            </li>

                            <li><a href="#">NEWS</a></li>
                            <li><a href="#">ABOUT US</a></li>
                            <li><a href="#">CONTACTS</a></li>
                            </li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
        </div> <!-- /#navigation -->


    </section>
</body>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<script src="../js/header.js" type="text/javascript"></script>

</html>
